<script>

import * as echarts from 'echarts';
export default {
  name: 'VisualizationSix',
  data() {
    return{

    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.get('/api/vis/data1', {

      }).then(res =>{
          if(res.data.code === 20041) {
            let data1 = [];
            let data2 = [];
            for (let i = 0; i < res.data.data.length; i++) {
              data1.push(res.data.data[i]["column2"]);
              data2.push(res.data.data[i]["column3"])
            }
            this.init(data1, data2);
          }
      }).catch(error =>{
        this.open4(error);
      })
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    init(data1, data2) {
      var chartDom = document.getElementById('main8');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '2022年每月平均降水量',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['平均降水量']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: data1
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '平均降水量',
            type: 'bar',
            data: data2,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
        ]
      };

      option && myChart.setOption(option);

    }
  }

}
</script>

<template>
  <div id="main8"></div>
</template>

<style scoped>
#main8 {
  width: 100%;
  height: 100%;
}
</style>